<template>
  <div>
    <div class="form-wrap">
      <div v-for="(item,idx) in list" :key="idx" class="info-field">
        <span class="label">{{item.label}}:</span>
        <span class="value">{{item.value}}</span>
      </div>

      <div v-if="memberType==='PERSONAL'" class="info-field">
        <span class="label">用户状态:</span>
        <!-- <span class="value">{{state.userState}}</span> -->
        <span class="value">{{newUserState[memberInfo.status]}}</span>
        <!-- <span class="tail">注册时间 {{state.registerTime}}</span> -->
        <span class="tail">注册时间 {{memberInfo.createDate}}</span>
      </div>
      <div v-if="memberType==='PERSONAL'" class="info-field">
        <span class="label">实名认证情况:</span>
        <span class="value">{{state.realState}}</span>
        <!-- <span class="tail">认证时间 {{state.realNameTime}}</span> -->
      </div>

      <div v-if="memberType==='COMPANY'" class="info-field">
        <span class="label">审核状态:</span>
        <span class="value">{{state2.status}}</span>
        <span class="tail">审核时间 {{state2.checkTime}}</span>
      </div>

      <div class="info-field">
        <span class="label">绑定手机号:</span>
        <span class="value">{{bindPhoneNumber}}</span>
        <button
          class="btn-bind-change"
          size="mini"
          @click="showPopup=true"
        >更改绑定手机</button>
      </div>
      <div class="info-field">
        <span class="label">会员标识:</span>
        <!-- <span class="value">{{userId}}</span> -->
        <span class="value">{{account.shopId}}</span>
      </div>
      <div class="info-field">
        <span class="label">会员类型:</span>
        <span class="value">{{type[memberType]}}</span>
      </div>
      
    </div>

    <div class="popup-window" :class="{show:showPopup}">
      <div class="popup-wrap">
        <p class="label">原手机号</p>
        <input
          v-model="form.oldPhone"
          class="input-block"
          type="number"
          placeholder="请输入原手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
        <p class="label">新手机号</p>
        <input
          v-model="form.newPhone"
          class="input-block"
          type="number"
          placeholder="请输入新手机号"
          placeholder-class="placeholder-part"
          maxlength="11"
        />
        <p class="label">短信验证</p>
        <div class="input-field">
          <input
            v-model="form.code"
            class="input-block"
            type="text"
            placeholder="请输入验证码"
            placeholder-class="placeholder-part"
            maxlength="6"
          />
          <ButtonCloudMsg :phone="form.newPhone" :type="memberType" big />
        </div>

        <div class="btn-block">
          <button
            class="btn-footer green"
            size="mini"
            @click="handleChangePhone"
          >确认</button>
          <button class="btn-footer" size="mini" @click="handleHide">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ButtonCloudMsg from '@/components/ButtonCloudMsg'
import { getCurrentPageParams } from '@/utils'
import {
  UPDATE_CLOUD_ACCOUNT_PHONE,
  FIND_CLOUD_ACCOUNT_INFO,
  YST_FIND_MEMBER_INFO
} from '@/api'

export default {
  components: { ButtonCloudMsg },
  props: {},
  data () {
    return {
      newUserState: {
        0: '待审核',
        1: '正常',
        2: '审核失败',
        3: '以锁'
      },
      stateList: {
        1: '有效',
        3: '审核失败',
        5: '已锁',
        7: '待审核'
      },
      stateList2: { 1: '待审核', 2: '审核成功', 3: '审核失败' },
      type: {
        COMPANY: '企业',
        PERSONAL: '个人'
      },
      showPopup: false,
      form: { newPhone: '' },
      memberInfo: {},
      memberType: '',
      account: {}
    }
  },
  computed: {
    // account () {
    //   return this.$cookie.get('account')
    // },
    // memberType () {
    //   return getCurrentPageParams('memberType')
    // },
    // memberInfo () {
    //   return this.$cookie.get('cloud-account-info')
    // },
    list () {
      if (this.memberType === 'PERSONAL') {
        return [
          {
            label: '用户姓名',
            value: this.hideMsg(this.memberInfo.name, 'name')
          }
        ]
      } else {
        return [
          {
            label: '企业名称',
            value: this.hideMsg(this.memberInfo.companyName, 'name')
          },
          { label: '企业地址', value: this.memberInfo.companyAddress || '' },
          {
            label: '营业执照号',
            value: this.hideMsg(this.memberInfo.businessLicense)
          },
          {
            label: '组织机构代码',
            value: this.hideMsg(this.memberInfo.organizationCode)
          },
          {
            label: '社会信用代码',
            value: this.hideMsg(this.memberInfo.uniCredit)
          },
          {
            label: '税务登记证',
            value: this.hideMsg(this.memberInfo.taxRegister)
          },
          { label: '证照过期时间', value: this.memberInfo.expLicense },
          {
            label: '法人姓名',
            value: this.hideMsg(this.memberInfo.legalName, 'name')
          },
          {
            label: '法人手机号码',
            value: this.hideMsg(this.memberInfo.legalPhone, 'mobile')
          },
          { label: '开户行名称', value: this.memberInfo.parentBankName || '' },
          { label: '开户支行名称', value: this.memberInfo.bankName || '' }
        ]
      }
    },
    state () {
      let {
        userState,
        registerTime,
        isIdentityChecked,
        realNameTime
      } = this.memberInfo

      return {
        userState: this.stateList[userState],
        registerTime,
        realState: isIdentityChecked ? '已认证' : '未认证',
        realNameTime
      }
    },
    state2 () {
      let { status, checkTime } = this.memberInfo
      return { status: this.stateList2[status], checkTime }
    },
    bindPhoneNumber () {
      return this.hideMsg(this.memberInfo.phone, 'mobile')
    },
    userId () {
      return this.hideMsg(this.memberInfo.userId, 'tag')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {
    this.account = this.$cookie.get('account')
    this.memberType = getCurrentPageParams('memberType')
    console.log(this.memberType)
    // this.refreshCloudAccountMemberInfo()
    this.getAccountInfo()
  },
  methods: {
    handleHide () {
      this.showPopup = false
      setTimeout(() => {
        this.form = { newPhone: '' }
      }, 300)
    },
    handleChangePhone () {
      if (this.form.oldPhone && this.form.newPhone && this.form.code) {
        this.updateBindPhone()
      } else {
        this.$toast('请先完成表单')
      }
    },

    hideMsg (msg, type) {
      if (!msg) {
        return ''
      }
      switch (type) {
        case 'mobile':
          return msg.match(/^\d{3}/)[0] + '****' + msg.match(/\d{4}$/)[0]
        case 'name':
          return msg.match(/^\S/)[0] + '**'
        case 'tag':
          return msg.match(/^\S{4}/)[0] + '*******' + msg.match(/\S{4}$/)[0]
        default:
          return new Array(9).join('*')
      }
    },
    updateBindPhone () {
      const vm = this
      let params = {
        // bizUserId: vm.$store.state.account.shopId,
        // identity: 'SHOP',
        // relateId: vm.$store.state.account.shopId,
        relateId: vm.$cookie.get('account').shopId,
        ...vm.form
      }
      UPDATE_CLOUD_ACCOUNT_PHONE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$toast('操作成功')
            // vm.refreshCloudAccountMemberInfo()
            vm.getAccountInfo()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    getAccountInfo () {
      const vm = this
      let params = {
        identity: 'SHOP',
        // relateId: vm.account.shopId
        relateId: vm.$cookie.get('account').shopId
      }
      YST_FIND_MEMBER_INFO(params)
        .then(r => {
          if (r.data.code === '0') {
            let memberInfo = r.data.data
            vm.memberInfo = r.data.data
            vm.$cookie.set('cloud-account-info', memberInfo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新云账户接口-查询是否开通了云账户
    refreshCloudAccountMemberInfo () {
      const vm = this

      FIND_CLOUD_ACCOUNT_INFO(vm.$cookie.get('account').shopId)
        .then(r => {
          if (r.data.code === '0') {
            // let { memberInfo } = JSON.parse(r.data.data)
            // vm.$cookie.set('cloud-account-info', memberInfo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';

.form-wrap {
  > .info-field {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 0;
    font-size: 15px;
    position: relative;
    > .label {
      margin-right: 5px;
    }
    > .tail {
      font-size: 12px;
      color: $gray;
      flex-grow: 1;
      text-align: right;
    }
    > .btn-bind-change {
      background-color: $green;
      color: $white;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);
    }
  }
}
.popup-window {
  display: flex;
  justify-content: center;
  align-items: center;
  > .close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  > .popup-wrap {
    background-color: $white;
    width: 280px;
    border-radius: 8px;
    padding: 15px;
    font-size: 15px;
    > .label {
      line-height: 200%;
    }
    .input-block {
      padding: 5px 10px;
      border: 1px solid $light-gray;
      border-radius: 4px;
    }
    > .input-field {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      > .input-block {
        width: calc(100% - 120px);
      }
    }
    > .btn-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 10px 0;
      > .btn-footer {
        width: 90px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        margin: 0;
        &.green {
          background-color: $green;
        }
      }
    }
  }
}
</style>
